<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                    <el-dropdown-item command="b">狮子头</el-dropdown-item>
                    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                    <el-dropdown-item disabled command="d">双皮奶</el-dropdown-item>
                    <el-dropdown-item divided command="e">蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown>
                <span class="el-dropdown-link">
                    请选择英雄<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="name in arr" :command="name">{{name}}</el-dropdown-item>

                </el-dropdown-menu>
            </el-dropdown>
            <input type="text" v-model="">
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="../../js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let  v = new Vue({
            el: '#app',
            data: function() {
                return {
                    arr:["刘备","关羽","张飞"],
                    info:""
                }
            },
            methods:{
                handleCommand(command){
                    //把传递过来的值  弹出
                    v.@message.success(command);
                    v.info=command;
                }
            }
        })
    </script>

</html>